<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发型工作室-服务项目</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../util/AdminLTE/plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="../util/AdminLTE/plugins/datatables/dataTables.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../util/AdminLTE/dist/css/adminlte.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="../util/AdminLTE/plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="../util/AdminLTE/plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="../util/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="../util/AdminLTE/plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="../util/AdminLTE/plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="../util/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <!-- 主CSS -->
    <link rel="stylesheet" type="text/css" href="../util/css/main.css">
    <!-- 公共类CSS -->
    <link rel="stylesheet" type="text/css" href="../util/css/public.css">
</head>
<body>

<div class="wrapper">

    <!-- 头部 -->
    <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Home</a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="fa fa-user"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header" >早上好，用户<span th:text="${managerNumber}"></span></span>
                    <div class="dropdown-divider"></div>
                    <a href="/login/cancellation" class="dropdown-item">
                        <i class="fa fa-sign-out"></i> 用户注销
                    </a>
                   <div class="dropdown-divider"></div>
						<a href="#" class="dropdown-item" data-toggle="modal"
							data-target="#changePassword"> <i class="fa fa-address-card"></i>
							修改密码
						</a>
					</div></li>
				<li class="nav-item"><a class="nav-link"
					data-widget="control-sidebar" data-slide="true" href="#"><i
						class="fa fa-th-large"></i></a></li>
			</ul>
		</nav>
		<!-- 修改密码遮罩层（模态框） -->
		<div class="modal fade" id="changePassword" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="card card-primary">
						<div class="card-header">
							<h3 class="card-title">修改密码</h3>
						</div>
						<!-- /.card-header -->
						<!-- form start -->
						<form class="form-horizontal" action="/login/changePassword" method="post" onsubmit="return changePassword()">
							<div class="card-body">
								<div class="form-group">
									<label for="inputPassword_old">旧密码</label>

									<div class="col-sm-10">
										<input type="password" class="form-control"
											id="password" name="password" placeholder="请输入当前密码">
									</div>
								</div>
								<div class="form-group">
									<label for="inputPassword_new">新密码</label>

									<div class="col-sm-10">
										<input type="password" class="form-control"
											id="newPassword_1" name="newPassword_1" placeholder="请输入新密码">
									</div>
								</div>
								<div class="form-group">
									<label for="inputPassword_conf" >确认密码</label>

									<div class="col-sm-10">
										<input type="password" class="form-control"
											id="newPassword_2" name="newPassword_2" placeholder="请确认新密码">
									</div>
								</div>
							</div>
							<!-- /.card-body -->
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary">提交更改</button>
							</div>
						</form>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
    <!-- 头部 -->

    <!-- 侧边栏 -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="index3.html" class="brand-link">
            <img src="../../util/AdminLTE/dist/img/AdminLTELogo.png" alt="AdminLTE Logo"
                 class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">雷格发型工作室</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="../../util/AdminLTE/dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info">
                    <a href="#" class="d-block">Alexander Pierce</a>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">客户</li>
                    <li class="nav-item">
                        <a href="/customer/" class="nav-link">
                            <i class="nav-icon fa fa-user"></i>
                            <p>
                                客户信息管理
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/payList/" class="nav-link">
                            <i class="nav-icon fa fa-credit-card"></i>
                            <p>
                                客户充值
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <li class="nav-item">
                        <a href="/record/" class="nav-link">
                            <i class="nav-icon fa fa-bars"></i>
                            <p>
                                客户服务结算
                            </p>
                        </a>
                    </li>
                    <li class="nav-header">员工</li>
                    <li class="nav-item has-treeview menu-open">
                        <a href="#" class="nav-link">
                            <i class="nav-icon fa fa-users"></i>
                            <p>
                                员工管理
                                <i class="right fa fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="/employeeType/" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>员工类型管理</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/employeeManage/" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>员工信息管理</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-header">服务</li>
                    <li class="nav-item">
                        <a href="/serviceItem/" class="nav-link active">
                            <i class="nav-icon fa fa-print"></i>
                            <p>
                                服务项目管理
                            </p>
                        </a>
                    </li>
                    <li class="nav-header">统计</li>
                    <li class="nav-item">
                        <a href="/count/salary" class="nav-link">
                            <i class="nav-icon fa fa-calendar"></i>
                            <p>
                                统计工资结算
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/count/statistics" class="nav-link">
                            <i class="nav-icon fa fa-usd"></i>
                            <p>
                                统计盈收
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/expense/" class="nav-link ">
                            <i class="nav-icon fa fa-usd"></i>
                            <p>
                                支出项目统计
                            </p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>
    <!-- 侧边栏 -->

    <!-- 主体内容 -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>服务项目管理</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">服务</a></li>
                            <li class="breadcrumb-item active">服务项目管理</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <!-- /.card-header -->
                        <div class="card-header d-flex p-0">
                         <span style="margin-top: 18px; margin-left: 10px; color:red;" th:text="${remind}"></span>
                            <ul class="nav nav-pills ml-auto p-2">
                                <li class="nav-item"><a class="nav-link active show" href="#on" data-toggle="tab">可用项目</a></li>
                                <li class="nav-item"><a class="nav-link" href="#off" data-toggle="tab">停用项目</a></li>
                            </ul>
                        </div><!-- /.card-header -->
                        <div class="card-body">
                            <div class="tab-content">
                                <div class="tab-pane active show" id="on">
                                    <div class="table-responsive">
                                        <table style="min-width: 500px" id="form1" class="table table-hover">
                                            <caption>
                                                <button class="btn btn-info" data-toggle="modal" data-target="#edit" onclick="lick(this, this.id)">添加服务项目</button>
                                            </caption>
                                            <thead>
                                            <tr>
                                            <input id="user" type="text" class="form-control">
                                                <th>编号</th>
                                                <th>服务项目名称</th>
                                                <th>服务项目价格</th>
                                                <th>提供服务员工类型</th>
                                                <th>是否可用</th>
                                                <th>操作</th></tr>
                                            </thead>
                                            <tbody id= "myTable">
                                            <tr th:each="pSIT :${pageServiceItemTrue}">
                                            <td></td>
                                                <td class="id"th:text="${pSIT.id}">1</td>
                                                <td th:text="${pSIT.name}">洗头</td>
                                                <td th:text="${pSIT.price}">15</td>
                                                <td th:text="${pSIT.type}">洗发技师、发型师</td>
                                                <td class="id" th:text="${pSIT.status}"></td>
                                                <td style="color: green;">可用</td>
                                                <td>
                                                    <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#edit" onclick="lick(this, this.id)"><i class="fa fa-pencil"></i>编辑</button>
                                                    <a class="btn btn-danger btn-sm" th:href="@{'/serviceItem/deleteServiceItem?id='+${pSIT.id}}"><i class="fa fa-trash"></i>停用</a>
                                                </td>
                                                <td class="id" th:text="${pSIT.introduction}"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                     <div class="card-footer clearfix" id="myButtonTwo">
                            <ul class="pagination pagination-sm m-0 float-right">
                                <li class="page-item"><a class="page-link" th:href="@{'/eserviceItem/?page=0'}">第一页</a></li>
                                <li class="page-item"><a class="page-link" th:if="${page}>0" th:href="@{'/serviceItem/page='+${page-1}}">上一页</a></li>
                                <li class="page-item"><a class="page-link" style="cursor:default"><span th:text="${page+1}"></span> / <span th:text="${maxPageTrue+1}"></span></a></li>
                                <li class="page-item"><a class="page-link" th:if="${page}<${maxPageTrue}"  th:href="@{'/serviceItem/?page='+${page+1}}">下一页</a></li>
                                <li class="page-item"><a class="page-link" th:href="@{'/serviceItem/?page='+${maxPageTrue}}">末页</a></li>
                            </ul>
                        </div>
                                </div>
                                <div class="tab-pane" id="off">
                                    <div class="table-responsive"><input id="username" type="text" class="form-control">
                                        <table style="min-width: 500px" id="form2" class="table table-hover">
                                            <caption>
                                                <button class="btn btn-info" data-toggle="modal" data-target="#edit" onclick="lick(this, this.id)">添加服务项目</button>
                                            </caption>
                                            <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>服务项目名称</th>
                                                <th>服务项目价格</th>
                                                <th>提供服务员工类型</th>
                                                <th>服务项目简介</th>
                                                <th>操作</th></tr>
                                            </thead>
                                            <tbody id="mytable">
                                            </tbody>
                                        </table>
                                    </div>
                                     <div class="card-footer clearfix" id="myButton">
                           <!--  <ul class="pagination pagination-sm m-0 float-right">
                                <li class="page-item"><a class="page-link" th:href="@{'/eserviceItem/?pageFalse=0'}">第一页</a></li>
                                <li class="page-item"><a class="page-link" th:if="${pageFalse>0}" th:href="@{'/serviceItem/pageFalse='+${pageFalse-1}}">上一页</a></li>
                                <li class="page-item"><a class="page-link" style="cursor:default"><span th:text="${pageFalse+1}"></span> / <span th:text="${maxPageFalse+1}"></span></a></li>
                                <li class="page-item"><a class="page-link" th:if="${pageFalse}<${maxPageFalse}"  th:href="@{'/serviceItem/?pageFalse='+${pageFalse+1}}">下一页</a></li>
                                <li class="page-item"><a class="page-link" th:href="@{'/serviceItem/?pageFalse='+${maxPageFalse}}">末页</a></li>
                            </ul> -->
                        </div>
                                </div>
                            </div>
                           
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
   <!-- 编辑员工类型（模态框） -->
    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">修改服务项目</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form id="serviceItem" class="form-horizontal" onsubmit="return edit()" action="/serviceItem/insertServiceItem" method="post">
                        <div class="card-body">
                        <div class="form-group id">
                                <label for="" class="">客户id</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control id" id="id" name="id" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="">服务项目名称</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="name" name="name" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="">服务项目价格</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="pay" name="price" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="">服务项目简介</label>

                                <div class="col-sm-10">
                                    <textarea class="form-control" rows="3" placeholder="" name="introduction" id="content"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>可提供服务员工类型</label>

                                <div class="form-check" th:each="et : ${employeeType}">
                                    <input class="" name="type" th:class="${et.name}"  type="checkbox"  th:value="${et.id}"  th:text="${et.name}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label>是否可用</label>

                                <div class="col-sm-10">
                                    <select class="form-control" name="status" id="status">
                                        <option value="">请选择项目状态</option>
                                        <option value="true">可用</option>
                                        <option value="false">不可用</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                        <div class="modal-footer">
                            <span style="color: red;" id="span_edit"></span>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">提交更改</button>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 主体内容 -->
    <!--底部版权信息-->
    <footer class="main-footer">
        <strong>Copyright &copy; 2018-05-03 <a href="https://coding.net/u/leige123321/p/HairCut/git?public=true">项目主页</a>.</strong>
        All rights reserved.
        <div class="float-right d-none d-sm-inline-block">
            <b>雷格</b> 发型工作室
        </div>
    </footer>
    <!--底部版权信息-->

</div>

<!-- jQuery -->
<script src="../util/AdminLTE/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="../util/AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="../util/AdminLTE/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../util/AdminLTE/plugins/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="../util/AdminLTE/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="../util/AdminLTE/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="../util/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../util/AdminLTE/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="../util/AdminLTE/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="../util/AdminLTE/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="../util/AdminLTE/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="../util/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="../util/AdminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../util/AdminLTE/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../util/AdminLTE/dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../util/AdminLTE/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../util/AdminLTE/dist/js/demo.js"></script>
<script>

function PageNext(a){//定义了2个参数a,b
	var len = $('table tr').length;
	var page = len * a;
    for(var i = 1;i<len;i++){
        $('table tr:eq('+i+') td:first').text(i+page);
    }
}
$(function () {
	 //$('table tr:not(:first)').remove();
	 
    var len = $('table tr').length;
    for(var i = 1;i<len;i++){
        $('table tr:eq('+i+') td:first').text(i);
    }
	$(".id").hide();
        $('#form').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false
        });
    });
    
//修改密码表单验证
function changePassword() {
    var oldPassword = document.getElementById('password').value;
    var newPassword_1 = document.getElementById('newPassword_1').value;
    var newPassword_2 = document.getElementById('newPassword_2').value;
    if (oldPassword == ""){
        document.getElementById("span_password").innerHTML='请输入当前密码';
        return false;
    }else if (newPassword_1 == ""){
        document.getElementById("span_password").innerHTML='请输入新密码';
        return false;
    }else if (newPassword_2 == ""){
        document.getElementById("span_password").innerHTML='请输入确认密码';
        return false;
    }else if (newPassword_1 != newPassword_2){
        document.getElementById("span_password").innerHTML='新密码和确认密码不一致';
        return false;
    }
    return true;
}
//修改服务项目表单验证
function edit() {
    var name = document.getElementById('name').value;
    var pay = document.getElementById('pay').value;
    var content = document.getElementById('content').value;
    
    var status = document.getElementById('status');//下拉框值
    var index=status.selectedIndex ;             // selectedIndex代表的是你所选中项的index
    var status_value = status.options[index].value;

    if (name == ""){
        document.getElementById("span_edit").innerHTML='请输入服务项目名称';
        return false;
    }else if (pay == ""){
        document.getElementById("span_edit").innerHTML='请输入服务项目价格';
        return false;
    }else if (content == ""){
        document.getElementById("span_edit").innerHTML='请输入服务项目简介';
        return false;
    }else if (status_value == ""){
        document.getElementById("span_edit").innerHTML='请选择是否可用';
        return false;
    }else{
        var flag = false
        var is = 0;
        //多选框确认
        $('input:checkbox').each(function() {
            if ($(this).get(0).checked) {
                flag = true;
                is =1;
            }else{
            	if(is == 0){
            	  document.getElementById("span_edit").innerHTML='请至少选择一个员工类型';
            	  }
            }
        });
      
        return flag;
    }
}
function lick(obj, id){
    var td_content = $(obj).parents("tr").children("td");  //获取当前行中的所有td值
    
    var id = td_content.eq(1).text();
    var name = td_content.eq(2).text(); //获取当前行第二个td的值
    var pay = td_content.eq(3).text(); //获取当前行第二个td的值
    var type = td_content.eq(4).text(); //获取当前行第二个td的值
    var status = td_content.eq(5).text(); //获取当前行第二个td的值
    var content = td_content.eq(8).text(); //获取当前行第二个td的值
    if(id==""){id = 0;}
    document.getElementById('id').value = id;
    document.getElementById('name').value = name;
    document.getElementById('pay').value = pay;
    document.getElementById('content').value = content;
    document.getElementById('status').value = status;
    //取消多选框选择
    $("input:checkbox").removeAttr("checked");
    //字符串分割
    type = type.split(",");
    //遍历字符串分割数组
    for(i=0;i<type.length;i++){
        var typeValue =type[i];
        $("input:checkbox[class ='"+typeValue+"']").attr("checked","checked");
    }

/*        多选框取值
    var type=document.getElementsByName("type");
    for(var i=0;i<type.length;i++){
        if(type[i].checked){
            //alert(type[i].value+","+type[i].nextSibling.nodeValue);
        }
    }*/
}
/* ajax分页 */
var s = 0;
var maxPage = 3;
var conditions;
var conditionsTwo;
var tableHtml = $("#myTable").html();
var buttonHtml = $("#myButtonTwo").html();
$(function(){
		$('#username').keyup(function() {  
            conditions=$(this).val();
            var myData = {
            		conditions:conditions,
            		status:"false",
            }
            query(myData);
            });
    	$('#user').keyup(function() {  
            conditionsTwo=$(this).val();
            var myData1= {
            		conditions:conditionsTwo,
            		status:"true",
            }
            queryTwo(myData1);
            });
	function query(myData) {  
        if(conditions!=''){  
            $.ajax({  
                type: "post",  
                url: "/serviceItem/sIConditions",  
                data:myData,  
                dataType: "json",  
                error: function(request) {  
                    alert("Connection error:"+request.error);  
                },  
                success: function(data) {  
                	var myHtml = "";
                	var myhtmltd = "";
                	for(var i = 0;i<data.length;i++){
                   		myhtmltd ="<td></td><td class='id'>"+data[i].id+"</td><td>"+
                   		data[i].name+"</td><td>"+
                   		data[i].price+"</td><td>"+
                   		data[i].type+"</td><td class='id'>"+
                   		data[i].status+"</td><td style='color:red;'>"+
                   		"不可用</td>"+
                   		"<td><button class='btn btn-warning btn-sm' data-toggle='modal' data-target='#edit' onclick='lick(this, this.id)'><i class='fa fa-pencil'></i>编辑</button>"+
                   		"<a class='btn btn-danger btn-sm' href='/serviceItem/deleteServiceItem?id="+data[i].id+"'><i class='fa fa-trash'></i>启用</a></td>"+
                   		"<td class='id'>"+data[i].introduction+"</td>";
                    	 myHtml=myHtml+"<tr>"+myhtmltd+"</tr>";
                    	  //循环数据追加到 myHtml
                    	}
                    	myHtml=myHtml;
                    	 $("#mytable").html(myHtml);
                    	 $("#myButton").html("");
                    nameId();
                }  
            });   
        }else{  
           s = 0 ;
           btn();
           name();
        }  
    }
	//初始化页面
	var userData = {
    	    page:s,
    	    size:10,
    	}
$.ajax({
	cache: true,  
    type : "post",
    url : "/serviceItem/serviceItem",//不能用ajax命名
    data :userData,
    async: true,  
    error: function(request) {  
        alert("Connection error:"+request.error);  
    },  
    success : function(results){
    	var data = $.parseJSON(results); 
    	var myHtml = "";
    	var myhtmltd = "";
    	var myhtmltype = "<tr><th>编号</th><th>员工工号</th><th>员工手机号</th><th>员工类型</th><th>员工姓名</th><th>在职状态</th><th>操作</th></tr>";
    	maxPage = data[data.length-1].maxPage;
    	for(var i = 0;i<data.length-1;i++){
   		myhtmltd ="<td></td><td class='id'>"+data[i].id+"</td><td>"+
   		data[i].name+"</td><td>"+
   		data[i].price+"</td><td>"+
   		data[i].type+"</td><td class='id'>"+
   		data[i].status+"</td><td style='color:red;'>"+
   		"不可用</td>"+
   		"<td><button class='btn btn-warning btn-sm' data-toggle='modal' data-target='#edit' onclick='lick(this, this.id)'><i class='fa fa-pencil'></i>编辑</button>"+
   		"<a class='btn btn-danger btn-sm' href='/serviceItem/deleteServiceItem?id="+data[i].id+"'><i class='fa fa-trash'></i>启用</a></td>"+
   		"<td class='id'>"+data[i].introduction+"</td>";
    	 myHtml=myHtml+"<tr>"+myhtmltd+"</tr>";
    	  //循环数据追加到 myHtml
    	}
    	myHtml=myHtml;
    	 $("#mytable").html(myHtml);
    	 btn();
    	 nameId();
    $("#page").text((s+1));
        }
        });
})
  function queryTwo(myData1) {
       	$("#myTable").html("");
            if(conditionsTwo!=''){ 
                $.ajax({  
                    type: "post",  
                    url: "/serviceItem/sIConditions",  
                    data:myData1, 
                    dataType: "json",  
                    error: function(request) {  
                        alert("Connection error:"+request.error);  
                    },  
                    success: function(data) {  
                    	var myHtml = "";
                    	var myhtmltd = "";
                    	for(var i = 0;i<data.length;i++){
                           		myhtmltd ="<td></td><td class='id'>"+data[i].id+"</td><td>"+
                           		data[i].name+"</td><td>"+
                           		data[i].price+"</td><td>"+
                           		data[i].type+"</td><td class='id'>"+
                           		data[i].status+"</td><td style='color:green;'>"+
                           		"可用</td>"+
                           		"<td><button class='btn btn-warning btn-sm' data-toggle='modal' data-target='#edit' onclick='lick(this, this.id)'><i class='fa fa-pencil'></i>编辑</button>"+
                           		"<a class='btn btn-danger btn-sm' href='/serviceItem/deleteServiceItem?id="+data[i].id+"'><i class='fa fa-trash'></i>启用</a></td>"+
                           		"<td class='id'>"+data[i].introduction+"</td>";
                           		myHtml=myHtml+"<tr>"+myhtmltd+"</tr>";
                        	  //循环数据追加到 myHtml
                        	}
                        	myHtml=myHtml;
                        	 $("#myTable").html(myHtml);
                        	 $("#myButtonTwo").html("");
                             nameId();
                    }  
                });   
            }else{  
            	$("#myTable").html(tableHtml);
               	$("#myButtonTwo").html(buttonHtml);
               	nameId();
            }  
        } 
    document.getElementById("btn").onclick = function() {
    	wait = 60;
    	nextPage();
    }
	function first() {
		s = 0;
		name();
	}
	function last(){
		s = maxPage;
		name();
	}
    function onPage(){
    	if(s<=0){
    		s = 0;
    	}else{
    		s=s-1;
    	}
    	name();
    }
    function nextPage(){
  	   if(0<=s<maxPage){
 		  s = s +1;  
 	   }else{
 	   		s = maxPage;
 	   }
  	   name();
    }
   function name() {
        var userData = {
        	    page:s,
        	    size:10,
        	}
    $.ajax({
    	cache: true,  
        type : "post",
        url : "/serviceItem/serviceItem",//不能用ajax命名
        data :userData,
        async: true,  
        error: function(request) {  
            alert("Connection error:"+request.error);  
        },  
        success : function(results){
        	var data = $.parseJSON(results); 
        	var myHtml = "";
        	var myhtmltd = "";
        	var myhtmltype = "<tr><th>编号</th><th>员工工号</th><th>员工手机号</th><th>员工类型</th><th>员工姓名</th><th>在职状态</th><th>操作</th></tr>";
        	maxPage = data[data.length-1].maxPage;
        	for(var i = 0;i<data.length-1;i++){
        		myhtmltd ="<td></td><td class='id'>"+data[i].id+"</td><td>"+
           		data[i].name+"</td><td>"+
           		data[i].price+"</td><td>"+
           		data[i].type+"</td><td class='id'>"+
           		data[i].status+"</td><td style='color:red;'>"+
           		"不可用</td>"+
           		"<td><button class='btn btn-warning btn-sm' data-toggle='modal' data-target='#edit' onclick='lick(this, this.id)'><i class='fa fa-pencil'></i>编辑</button>"+
           		"<a class='btn btn-danger btn-sm' href='/serviceItem/deleteServiceItem?id="+data[i].id+"'><i class='fa fa-trash'></i>启用</a></td>"+
           		"<td class='id'>"+data[i].introduction+"</td>";
        	  //循环数据追加到 myHtml
        		 myHtml=myHtml+"<tr>"+myhtmltd+"</tr>";
        	}
        	 $("#mytable").html(myHtml);
        	 $("#page").text((s+1));
        	 nameId();
            }
                });
		}
   function btn(){
   	var myButtonOn = "<ul class='pagination pagination-sm m-0 float-right'>"+
       "<li class='page-item'><a class='page-link' onclick='first()'>第一页</a></li>"+
       "<li class='page-item'><a class='page-link' th:if='"+s+">0' onclick='onPage()'>上一页</a></li>"+
       "<li class='page-item'><a class='page-link' style='cursor:default'><span id='page' ></span>/"+(maxPage+1)+" <span></span></a></li>"+
       "<li class='page-item'><a class='page-link' th:if='"+s+"<"+maxPage+"' onclick='nextPage()'>下一页</a></li>"+
       "<li class='page-item'><a class='page-link' onclick='last()'>末页</a></li>"
       "</ul>";

	$("#myButton").html(myButtonOn);
   $("#page").text((s+1));
   }
   function nameId() {
		 //$('table tr:not(:first)').remove();
	    var len = $('table tr').length;
	    for(var i = 1;i<len;i++){
	        $('table tr:eq('+i+') td:first').text(i);
	    }
		$(".id").hide();
   }
</script>
</body>
</html>